<template>
  <div>
    <div
      class="banner-box flex-center bg-[url('~/assets/images/product/jxb_banner.png')] bg-cover bg-no-repeat"
    >
      <div class="banner-con">
        <h1 class="banner-main-title">建巡宝·政务巡检/移动执法平台</h1>
        <p class="xl:w-[39vw] mt-10 banner-text">
          以微信为入口，实现在移动终端进行取证、形成监督记录、生成整改通知书、不良行为记录、企业整改情况复检、未及时整改工程预警、岗位人员资格验证、行政处罚建议上报等功能，平台与质量安全保监系统进行对接，直接绑定参建企业和人员的各种不良行为。
        </p>
      </div>
    </div>

    <div class="pt-[88px] pb-20">
      <div class="w-[96%] xl:w-[1200px] mx-auto">
        <h2 class="module-title">平台特点</h2>
        <div class="flex flex-wrap mt-10 justify-center md:space-x-4">
          <div
            v-for="(item, ind) in traitList"
            :key="ind"
            class="w-[285px] h-[313px] bg-white mb-6 px-4 pt-12 relative text-center rounded-sm border border-[#EDF4FB] border-t-2 border-t-[#0099FF]"
          >
            <img
              class="inline-block"
              :src="require(`../../assets/images/product/jxb_0${ind + 1}.png`)"
            />
            <div class="text-[#222] mt-[15px]">{{ item.name }}</div>
            <p class="mt-[18px] text-left text-[#828282] text-sm xl:leading-6">
              {{ item.content }}
            </p>
          </div>
        </div>
      </div>
    </div>

    <div
      class="pt-[84px] pb-20 bg-[url('~/assets/images/product/jxb_intro_banner.png')] bg-image-base"
    >
      <div class="module-con">
        <h2
          class="hidden md:block md:text-6xl bg-gradient-to-b from-[#EBF6FF] to-[#F8FCFF] uppercase bg-clip-text text-fill-color"
        >
          Mobile law enforcement applet
        </h2>
        <h3
          class="text-[#1393FF] !leading-[18px] w-fit font-extrabold md:text-2xl border-b-2 border-[#FF9A19]"
        >
          移动执法小程序
        </h3>
        <div class="flex items-center justify-between">
          <img
            alt="建巡宝·政务巡检/移动执法平台"
            class="w-[23.6%] mt-[55px]"
            src="../../assets/images/product/jxb_phone_01.png"
          />
          <img
            class="w-[23.6%] mt-[15px]"
            src="../../assets/images/product/jxb_phone_02.png"
          />
          <img
            class="w-[23.6%] -mt-[25px]"
            src="../../assets/images/product/jxb_phone_03.png"
          />
          <img
            class="w-[23.6%] -mt-[65px]"
            src="../../assets/images/product/jxb_phone_04.png"
          />
        </div>
      </div>
    </div>

    <div class="pt-[84px] pb-20 bg-[#FBFBFB]">
      <div class="module-con">
        <h2 class="module-title">平台价值</h2>
        <div class="mt-10">
          <div
            class="flex items-center py-7 md:px-[54px] bg-[url('~/assets/images/product/jxb_value_banner.png')] bg-image-base bg-contain"
          >
            <img
              class="w-[116px]"
              src="../../assets/images/product/jxb_value_01.png"
            />
            <div class="value-line ml-12 hidden md:block"></div>
            <div class="ml-8">
              <p class="text-[#222]">主管部门</p>
              <p class="text-[#666] md:leading-8 mt-3 text-sm md:text-base">
                利用移动互联网技术帮助监督人员进行现场取证和整改通知下达，动态掌握企业整改情况，实现政务无纸化办公，对问题较多的
                项目工地进行差异化管理。
              </p>
            </div>
          </div>
          <div
            class="flex items-center py-7 md:px-[54px] mt-8 bg-[url('~/assets/images/product/jxb_value_banner.png')] bg-image-base bg-contain"
          >
            <img
              class="w-[116px]"
              src="../../assets/images/product/jxb_value_02.png"
            />
            <div class="value-line ml-12 hidden md:block"></div>
            <div class="ml-8">
              <p class="text-[#222]">项目部</p>
              <p class="text-[#666] md:leading-8 mt-3 text-sm md:text-base">
                在移动端，将“整改通知、不良行为”等行政处罚纳入“违规记录”，项目可通过移动手机下载整改文书，完成整改要求、实时查看
                整改不良行为审批状态等。
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="py-18">
      <div class="module-con">
        <div class="module-title">平台优势</div>
        <div class="mt-10 flex justify-between">
          <div class="w-[30%] pb-[33.33%] relative">
            <img
              class="absolute left-0 top-0 w-full"
              src="~/assets/images/product/jxb_adv_01.png"
            />
            <div
              class="absolute left-0 top-0 opacity-90 w-full h-full bg-[#fff] flex-center flex-col"
            >
              <img
                class="w-[14%]"
                src="../../assets/images/product/jxb_adv_icon_01.png"
              />
              <div
                class="w-10 h-1 bg-gradient-to-r from-[#FFFFFF] to-[#2E2E2E] my-4 md:my-8"
              ></div>
              <p
                class="px-[15%] text-center text-xs md:text-2xl xl:leading-[44px]"
              >
                检查内容清晰整改进度一目了然
              </p>
            </div>
          </div>
          <div class="w-[30%] pb-[33.33%] relative">
            <img
              class="absolute left-0 top-0 w-full"
              src="~/assets/images/product/jxb_adv_02.png"
            />
            <div
              class="absolute left-0 top-0 opacity-90 w-full h-full bg-[#fff] flex-center flex-col"
            >
              <img
                class="w-[14%]"
                src="../../assets/images/product/jxb_adv_icon_02.png"
              />
              <div
                class="w-10 h-1 bg-gradient-to-r from-[#FFFFFF] to-[#2E2E2E] my-4 md:my-8"
              ></div>
              <p
                class="px-[15%] text-center text-xs md:text-2xl xl:leading-[44px]"
              >
                易录入快输出线上流程简化管理
              </p>
            </div>
          </div>
          <div class="w-[30%] pb-[33.33%] relative">
            <img
              class="absolute left-0 top-0 w-full"
              src="~/assets/images/product/jxb_adv_03.png"
            />
            <div
              class="absolute left-0 top-0 opacity-90 w-full h-full bg-[#fff] flex-center flex-col"
            >
              <img
                class="w-[14%]"
                src="../../assets/images/product/jxb_adv_icon_03.png"
              />
              <div
                class="w-10 h-1 bg-gradient-to-r from-[#FFFFFF] to-[#2E2E2E] my-4 md:my-8"
              ></div>
              <p
                class="px-[15%] text-center text-xs md:text-2xl xl:leading-[44px]"
              >
                多维信息反馈让监督管理有据可依
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      traitList: [
        {
          name: '移动检查',
          content:
            '支持文本、图片等方式进行问题描述，可指定人员进行问题整改，及时掌握整改状态，实现监管管理闭环。',
        },
        {
          name: '智能标识',
          content:
            '自动推送检查整改动态信息，智能标识已阅、正常、延期、完工等状态。',
        },
        {
          name: '生成报表',
          content: '支持机构、人员、时间检索，导出相关检查整改内容。',
        },
        {
          name: '私密设置',
          content: '可新建管理相关政务用户，检查私密性可按需设置。',
        },
      ],
      valueList: [
        '能源系统全自动智能运行，实现智慧节能建造',
        '加强能源管理，提高能源利用率，提高成本效益',
        '更加深入监测能源系统和诊断故障，确保安全生产',
        '实现碳减排和环保目标，实现项目绿色建造',
      ],
    }
  },
  head: {
    title: '建巡宝 · 政务巡检/移动执法-联合智为',
    meta: [
      {
        hid: 'index-keywords',
        name: 'keywords',
        content: '建巡宝 · 政务巡检/移动执法',
      },
      {
        hid: 'index-desc',
        name: 'description',
        content:
          '以微信为入口，实现在移动终端进行取证、形成监督记录、生成整改通知书、不良行为记录、企业整改情况复检、未及时整改工程预警、岗位人员资格验证、行政处罚建议上报等功能，平台与质量安全保监系统进行对接，直接绑定参建企业和人员的各种不良行为。',
      },
    ],
  },
}
</script>

<style scoped>
.value-line {
  width: 2px;
  height: 112px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    #2e83fa 53%,
    rgba(255, 255, 255, 0) 100%
  );
}
</style>
